<template>
    <div>
        <h1>vue3语法测试</h1>
        <h2>{{ msg }}</h2>
        <h2>{{ num }}</h2>
        <input type="text" v-model="num" />
        <button @click="add">+1</button>
        <h3>{{obj.name}}</h3>
        <input type="text" v-model="obj.name" />
        <button @click="shouObj">展示</button>
        <h2>{{arr}}</h2>
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                <div>{{item}}</div>
            </li>
            <li v-for="(value,key,index) of obj" :key="index">
                <div>{{value}} --- {{key}} --- {{index}}</div>
            </li>
        </ul>
        <hr />
        <h1>data中的值</h1>
        <h2>{{info}}</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref,reactive } from 'vue'

export default defineComponent({
    setup() {
        // let msg = '多产一点';
        // let num = 0;
        // function add () {
        //     console.log(num);

        // }
        let msg = ref('好冷啊');
        let num = ref(0);
        function add() {
            console.log(num);
            console.log(num.value);
            num.value += 1;
            

        }

        // let obj = ref({
        //     name:'tom',
        //     age:10
        // });

        let obj = reactive({
            name:'tom',
            age:10,
        });
        let arr = reactive([1,2,3,4,5]);
        function shouObj(){
            console.log(obj);
            
        }

        return {
            msg,
            num,
            add,
            obj,
            shouObj,
            arr,
        }
    },
    data() {
        return {
            info:'看值',
        }
    }
})
</script>

<style scoped>

</style>